<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/swiper.animate.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/swiper.js"></script>
    <script src="js/swiper.animate1.0.3.min.js"></script>
    <script src="js/ScrollMagic.js"></script>
    <script src="js/TweenMax.js"></script>
    <script src="js/animation.gsap.js"></script>
    <script src="js/velocity.js"></script>
    <script src="js/animation.velocity.js"></script>
    <script src="js/hm.js"></script>
    <script>
        (function() {
            let hm = document.createElement("script");
            hm.src = "js/hm.js";
            let s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <script src="js/index.js"></script>
<body>
<div id="body_1">
    <!-- <div class="top_1"></div> -->
    <div class="top">
        <img src="img/pc_bg.jpg" alt="">
    </div>
    <div class="middle_1"></div>
    <div class="middle">
        <div class="middle_con">
            <div class="p_left">
                <p>
                    潮流设计+轻盈机身
                </p>
                <p>一眼心动,<br>
                    一触流连
                </p>
            </div>
            <div class="p_right">
                nova 5 将炫光、渐变与钻石切面巧妙结合，形成光影与空间的视觉艺术。
                创新 3D 精雕纹理工艺，打造幻境星芒般的光影效果，令机身色彩随光影自由流动，纯然中不失唯美梦幻。
                一眼，怦然心动。7.33 毫米轻薄机身，优美的曲线弧度，打造舒适手感。一触，流连忘返。
            </div>
        </div>
        <div class="middle_con1">
            <img src="img/section2-left.png" alt="" class="con_left">
            <img src="img/section2-right.png" alt="" class="con_right">
            <img src="img/section2-text.png" alt="" class="con_text">
            <img src="img/section2-center.png" alt="" class="con_center">
        </div>
        <div class="section_bottom">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="img/orange_left.png" class="ani" swiper-animate-effect="mySlideInUp">
                        <img src="img/orange_right.png" class="ani" swiper-animate-effect="mySlideInUp" swiper-animate-delay="0.1s">
                    </div>
                    <div class="swiper-slide">
                        <img src="img/green_left.png" class="ani" swiper-animate-effect="mySlideInUp">
                        <img src="img/green_right.png" class="ani" swiper-animate-effect="mySlideInUp" swiper-animate-delay="0.1s">
                    </div>
                    <div class="swiper-slide">
                        <img src="img/purple_left.png" class="ani" swiper-animate-effect="mySlideInUp">
                        <img src="img/purple_right.png" class="ani" swiper-animate-effect="mySlideInUp" swiper-animate-delay="0.1s">
                    </div>
                    <div class="swiper-slide">
                        <img src="img/black_left.png" class="ani" swiper-animate-effect="mySlideInUp">
                        <img src="img/black_right.png" class="ani" swiper-animate-effect="mySlideInUp" swiper-animate-delay="0.1s">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <p class="swiper-line"></p>
                <p class="swiper-name">
                    <span>珊瑚橙<br>绮境森林<br>仲夏紫<br>亮黑色</span>
                </p>
                <p class="swiper-num">
                    <span>01<br>02<br>03<br>04</span>
                </p>
            </div>
        </div>
        <div class="big_1"></div>
        <div class="big">
            <div class="big_content">
                <div class="middle_con">
                    <div class="p_left">
                        <p>3200万超高清自拍</p>
                        <p>
                            让美，<br>
                            尽善尽美
                        </p>
                    </div>
                    <div class="p_right">
                        掌控逆光，让光听从你的美。前置 AI HDR+ ，突破光线限制，逆光自拍时，明暗与细节清晰呈现，自然柔和映衬
                        你的面容，让你的每一次自拍，都掠尽风光。
                    </div>
                </div>
            </div>
            <div class="big_center">
                <img src="img/pic_s5_pc.png" alt="" class="pic_s5_pc">
                <img src="img/pic_s5_pc_allphone.png" alt="" class="pic_s5_pc_allphone">
                <img src="img/pic_s6_pc_1.png" alt="" class="pic_s6_pc_1">
                <img src="img/pic_s6_pc_5.png" alt="" class="pic_s6_pc_5">
                <img src="img/pic_s6_pc_3.png" alt="" class="pic_s6_pc_3">
                <img src="img/pic_s6_pc_4.png" alt="" class="pic_s6_pc_4">
            </div>
        </div>
        <div class="big_bottom"></div>
        <div class="section_1"></div>
        <div class="section">
            <div class="section_content">
                <div class="middle_con">
                    <div class="p_left">
                        <p>4800 万 AI 四摄</p>
                        <p>
                            影像间，<br/>
                            勾勒精彩<br/>
                            生活
                        </p>
                    </div>
                    <div class="p_right">
                        一个有所准备的摄影师，是生活的见证者和记录者。而当你手持 nova 5，多场景四摄影像系统，就已帮你准备就
                        绪。无需携带多个镜头，不必繁琐设置参数，拿起手机，即可恣意记录属于你的精彩生活。
                    </div>
                </div>
            </div>
        </div>
        <div class="section_2"></div>
        <div class="section2">
            <div class="section_content section_content2">
                <div class="middle_con">
                    <div class="p_left">
                        <p>4800 万像素摄像头</p>
                        <p>
                            高清拍摄，<br/>
                            细腻意想不到
                        </p>
                    </div>
                    <div class="p_right">
                        定格的珍惜时刻，应经得起放大的考验。nova 5 搭载 4800 万像素摄像头，随手一拍的照片放大后，更多意想不
                        到的细节纷纷涌现。再有手持超级夜景，AI HDR+ 加持，逆光、弱光、暗光下的精彩瞬息依然细腻呈现。
                    </div>
                </div>
            </div>
            <div class="img_container"></div>
        </div>
        <div class="kong_1"></div>
    </div>
</div>
<script>
    let stageWidth,stageHeight,stageScale;
    let video = document.getElementById("body_1");

    function resize()
    {
        let wid;
        let hei;
        let bWidth = (document.documentElement.clientWidth)*1;
        let bHeight = (document.documentElement.clientHeight)*1;

        if(stageWidth!=bWidth||stageHeight!= bHeight)
        {
            stageWidth =  bWidth;
            stageHeight = bHeight;

            if(stageWidth/stageHeight < 2560/1440)
            {
                stageScale = stageHeight/1440;
                video.style.left = (stageWidth - 2560*stageScale)/2 + 'px';
                video.style.top = 0 + 'px';
            }
            else
            {
                stageScale = stageWidth/2560;
                video.style.left = 0 + 'px';
                video.style.top = (stageHeight - 1440*stageScale)/2 + 'px';
            }
            wid = 2560*stageScale;
            hei = 1440*stageScale;
            video.style.width =wid + 'px';
            video.style.height = hei + 'px';
        }
    }

    window.onresize = function(){
        resize();
    };
    resize();

</script>
</body>
</html>